<template>
  <view
    class="zb-dropdown-item zb-dropdown-item--down"
    :style="[
      parent.style,
      {
        zIndex: zIndex,
      },
    ]"
    v-show="showWrap"
  >
    <view
      class="zb-overlay"
      @touchmove.stop.prevent="() => {}"
      :class="[
        {
          mask__visible: mask,
        },
      ]"
      @click.stop="close"
    >
    </view>
    <view
      class="zb-popup zb-popup--top zb-dropdown-item__content zb-popup-slide-top-leave-active"
      :class="[
        {
          'content--visible_Y': mask,
        },
      ]"
    >
      <view style="min-height: 50px">
        <view
          class="zb-cell zb-cell--clickable zb-dropdown-item__option"
          v-for="(item, index) in options"
          :key="index"
          @click.stop="clickCell(item)"
        >
          <view
            class="zb-cell__title"
            :class="[
              {
                'active-cell__title': mValue === item.value,
              },
            ]"
            :style="[
              {
                color: mValue === item.value ? activeColor : '',
              },
            ]"
          >
            <text>{{ item.text }}</text>
          </view>
          <view class="zb-cell__value" v-if="mValue === item.value && !contentNum && duihaoFlag" >
            <text
              class="iconfont icon-duihao active-icon"
              :style="[
                {
                  color: showWrap ? activeColor : '',
                },
              ]"
            ></text>
          </view>
          <view v-if="options[index].count">
            {{options[index].count}}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  name: 'zb-dropdown-item',
  options: {
    virtualHost: true,
  },
  props: {
    value: {
      type: [String, Number],
    },
    modelValue: {
      type: [String, Number],
    },
    name: {
      type: [String, Number],
      required: true,
    },
    options: {
      type: Array,
      default: () => [],
    },
    contentNum: {
      type: [String, Number],
      default: '',
    },
    duihaoFlag:{
      type: Boolean,
      default: true,
    }
  },

  inject: {
    parent: {
      default: null,
    },
  },
  data() {
    return {
      zIndex: null,
      activeColor: null,
      mask: false,
      showWrap: false,
      title: null,
    }
  },
  watch: {
    // #ifndef VUE3
    value: {
      handler(newValue, oldValue) {
        const item = this.options.find((option) => option.value === this.mValue)
        this.title = item.text || ''
        this.$emit('change', { ...item })
      },
    },
    // #endif

    // #ifdef VUE3
    modelValue: {
      handler(newValue, oldValue) {
        const item = this.options.find((option) => option.value === this.mValue)
        this.title = item.text || ''
        this.$emit('change', { ...item })
      },
    },
    // #endif
    showWrap: {
      handler(newLength, oldLength) {
        // console.log('newLength=====',newLength)
      },
      immediate: true,
    },
    options: {
      handler(newValue, oldLength) {
        if (newValue.length) {
          const match = this.options.filter((option) => option.value === this.mValue)
          let title = match.length ? match[0].text : ''

          this.title = title
        } else {
        }
      },
      immediate: true,
      deep: true,
    },
  },
  computed: {
    mValue() {
      return this.value != null ? this.value : this.modelValue
    },
    displayTitle: {
      get() {
        if (this.title) {
          return this.title
        }
        const match = this.options.filter((option) => option.value === this.mValue)
        let title = match.length ? match[0].text : ''
        this.title = title
        return title
      },
      set(val) {
        this.title = val
      },
    },
  },
  methods: {
    /**
     * 获取父元素实例
     */
    getDropdown(name = 'zb-dropdown-menu') {
      let parent = this.$parent
      let parentName = parent.$options.name
      while (parentName !== name) {
        parent = parent.$parent
        if (!parent) return false
        parentName = parent.$options.name
      }
      return parent
    },
    clickCell(item) {
      this.changeStatus(this, 'mask', 'showWrap', false)
      if (item.value !== this.mValue) {
        this.title = item.text
        this.$emit('update:modelValue', item.value)
        this.$emit('input', item.value)
      }
    },
    changeStatus(item, param1, param2, status) {
      item[param1] = status
      this.watchTimer && clearTimeout(this.watchTimer)
      this.watchTimer = setTimeout(
        () => {
          item[param2] = status
        },
        status ? 20 : 200,
      )
    },
    close(item, type) {
      let index = this.parent.childrenList.findIndex((item) => item.title === this.title)
      this.parent.closeMask({}, index)
    },
    moveHandle() {
      return false
    },
    bindRelation() {
      let obj = this.parent.childrenList.find((item) => {
        let flag = item.name === this.name
        return flag
      })
      if (!this.parent || obj) {
        return
      }
      // #ifndef H5
      let obj1 = Object.assign(this.$data, this.$props)
      // #endif
      // #ifdef H5
      let obj1 = this
      // #endif
      const children = [...this.parent.childrenList, obj1]
      this.parent.childrenList = children
    },
  },
  created() {
    this.bindRelation()
    let parentDropMenu = this.getDropdown()
    this.activeColor = parentDropMenu.activeColor
    this.zIndex = parentDropMenu.zIndex
  },
  beforeDestroy() {
    if (this.parent) {
      this.parent.childrenList = this.parent.childrenList.filter(
        (item) => item.title !== this.title,
      )
    }
  },
}
</script>

<style lang="scss" scoped>
.zb-dropdown-item {
  position: fixed;
  right: 0;
  left: 0;
  z-index: 10;
  overflow: hidden;
}

.zb-dropdown-menu {
  -webkit-user-select: none;
  user-select: none;
  width: 100%;
}

.zb-popup {
  &-slide-top-leave-active,
  &-slide-left-leave-active,
  &-slide-right-leave-active,
  &-slide-bottom-leave-active {
    transition-timing-function: ease-in;
  }
}

.zb-popup-slide-top-enter,
.zb-popup-slide-top-leave-active {
  transform: translate3d(0, -100%, 0);
}

.zb-popup-slide-right-enter,
.zb-popup-slide-right-leave-active {
  transform: translate3d(100%, -50%, 0);
}

.zb-popup-slide-bottom-enter,
.zb-popup-slide-bottom-leave-active {
  transform: translate3d(0, 100%, 0);
}

.zb-dropdown-menu__bar {
  position: relative;
  display: flex;
  height: 48px;
  background-color: #fff;
  box-shadow: 0 2px 12px #6465661f;
}

.zb-dropdown-menu__item {
  display: flex;
  flex: 1;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  min-width: 0;
  //cursor: pointer;
}

.zb-dropdown-menu__title {
  position: relative;
  box-sizing: border-box;
  max-width: 100%;
  padding: 0 8px;
  color: #323233;
  font-size: 15px;
  line-height: 22px;
}

.zb-dropdown-menu__title::after {
  position: absolute;
  top: 50%;
  right: -4px;
  margin-top: -5px;
  border: 3px solid;
  border-color: transparent transparent #dcdee0 #dcdee0;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  opacity: 0.8;
  content: '';
}

.zb-dropdown-menu__title--down::after {
  margin-top: -1px;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}

.zb-dropdown-menu__title--active::after {
  border-color: transparent transparent currentColor currentColor;
}

.zb-dropdown-menu__bar--opened {
  z-index: 11;
}

.zb-dropdown-menu__title--active {
  color: #165DFF;
}

.zb-dropdown-item--down {
  bottom: 0;
}

.zb-overlay {
  z-index: 2003;
  position: absolute;
  animation-duration: 0.2s;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.7);
  transition: opacity 0.3s;
}

.mask__visible {
  opacity: 1;
}

.zb-popup {
  position: fixed;
  max-height: 100%;
  overflow-y: auto;
  background-color: #fff;
  -webkit-transition: -webkit-transform 0.2s;
  transition: -webkit-transform 0.2s;
  transition: transform 0.2s;
  transition:
    transform 0.2s,
    -webkit-transform 0.2s;
  -webkit-overflow-scrolling: touch;
}

.zb-dropdown-item__content {
  position: absolute;
  max-height: 80%;
  transition-duration: 0.2s;
  z-index: 2006;
}

.zb-popup--top {
  top: 0;
  left: 0;
  width: 100%;
}

.content--visible_Y {
  transform: translateY(0px);
}

@keyframes zb-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes zb-fade-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.zb-fade {
  &-enter-active {
    animation: 0.2s zb-fade-in both ease-out;
  }

  &-leave-active {
    animation: 0.2s zb-fade-out both ease-in;
  }
}

.zb-cell {
  position: relative;
  display: flex;
  box-sizing: border-box;
  width: 100%;
  padding: 10px 16px;
  overflow: hidden;
  color: #323233;
  font-size: 14px;
  align-items: center;
  line-height: 24px;
  background-color: #fff;
}

.zb-cell::after {
  position: absolute;
  box-sizing: border-box;
  content: ' ';
  pointer-events: none;
  right: 16px;
  bottom: 0;
  left: 16px;
  border-bottom: 1px solid #ebedf0;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
}

.zb-cell--clickable {
  //cursor: pointer;
}

@font-face {
  font-family: 'iconfont'; /* Project id 3711565 */
  src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAJ0AAsAAAAABiwAAAIqAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACCcAooRgE2AiQDCAsGAAQgBYRnBzAbggXIrrApw71IoCYMFA7zwg8FpwSIh//2a/fNnxXFNKlm0SyaaJYoYSsJQqJ0UrcOmUPc/Z+2G0vd+VMRqtMdYw3bmbT7/5emDL2VRVgUDiFxWIyiVpkbW96eX2X9dryc+m6f/lTOAgrwA7GsfRdK96BF0/qBWi9QALuHtVTCXs+LXIXhVQe5E88I1G1Y1TvePb7uTJ8CqTtzA/Z4kDXHU5YEnYmUlmVaqwpldG8Wr0qk5xQv0efj11ZMSEoFu+3scSfufJ2zoOh0OxQfOvP10McSSiiwoiMTV93lE33RxPfVg4Ep2pkFP7rdwBe79oT419mNTTBJK8EPb6kACW6LNtwY9SBRvqOrm+TinWt8/sfn7NN08ZbovwqOnx96s+2/aiOD7zxyMyxKdbUg+AfGLUjMRoaUmwRpNCnvVq07ObrseL/fsfbAueqhamBEtGIiQ6FqisrcEkoatlBWtYO6ZTuHGwZofZFrmPNEEHp9IGl7R6HXN5W5H5QM+0NZr3/U3UTrvIa5iLYYA8EYwkfIIlWTa0kU9hKTtgy4rnCL3GQ0B7ZhlWt7WCNPsaG5SxwRAmJVwa7wGJalAs0qx0iMVEQvTJOa3mJEqupsYSggUAyEHoFMRKlRQJbi911CiVYpwCB1W2aNjIYHNoMFUHt6DQ3cySuNOwmHEAQQplTArjQLlUoK0M2zcigiDOmIorZgOiRCdWN9s/q0E1BnOymcaYXyfZulgep0AA==')
    format('woff2');
}

.iconfont {
  font-family: 'iconfont' !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-duihao:before {
  content: '\eaf1';
}

.zb-cell__title,
.zb-cell__value {
  flex: 1;
}

.zb-cell__value {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.active-icon,
.active-cell__title {
  color: #165DFF;
}
</style>
